<template>
  <div class="fileBox">
    <headers :head_title="head_title"/>
    <main>
      <div v-if="list_file.length">
         <div v-for="(item,index) in list_file" :key="index" class="file_box">
      <div class="file_list">
        <p>[主要症状]</p>
       <p>{{ item.diseaseMain}}</p>
      </div>

      <div class="file_list">
        <p>[现病史]</p>
       <p>{{ item.diseaseNow}}</p>
      </div>

      <div class="file_list">
        <p>[既往病史]</p>
       <p>{{ item.diseaseBefore}}</p>
      </div>

      <div class="file_list">
        <p>[最后一次治疗经历]</p>
        <p>在{{ item.treatmentHospitalRecent }}医院</p>
      </div>

      <!-- 开始日期选择器 -->
      <div class="file_list">
        <p></p>
       <p>{{ item.treatmentStartTime }}日开始治疗</p>
      </div>
      <div class="file_list">
        <p class="zlgt">治疗过程是:</p>
       <p><br>{{ item.treatmentProcess }}</p>
      </div>
      <div class="file_list">
        <p></p>
        <p>{{ item.treatmentStartTime }}日治疗结束</p>
      </div>


      <div class="file_list">
        <p>[相关图片]</p>
        <!-- 相关图片 -->
        <div v-for="(imgUrl, imgIndex) in item.archives" :key="imgIndex">
          <img class="file_img" :src="imgUrl" alt="">
        </div>
        <div>
          <!-- <p>{{ item.archives }}</p> -->
        </div>
        <button class="file_edit"  @click="append">修改</button>
      </div>
    </div>
      </div>

      <div class="message_list" v-else>
        <img class="message_img" src="../../image/空档案.png" >
        <button class="file_add"  @click="addend">添加</button>
      </div>
    </main>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import http from '@/http'
import headers from '@/components/header.vue'
const router = useRouter()
const head_title='我的档案'

// 存档案数据
const list_file=ref([])

const getLocalImages = () => {
    const localImagesStr = localStorage.getItem('list_img');
    if (localImagesStr) {
        const localImages = JSON.parse(localImagesStr);
        return localImages;
    }
    return [];
};
const localImages = getLocalImages();

// 拿取档案数据
async function getFile() {
    const res = await http.get('http://localhost:3000/list');
    list_file.value = res.data;
    // 找出id最大的元素
    if (list_file.value.length > 0) {
        let maxIdElement = list_file.value[0];
        for (const element of list_file.value) {
            if (element.id > maxIdElement.id) {
                maxIdElement = element;
            }
        }
        list_file.value = [maxIdElement];
    }

    const localImages = getLocalImages();
    // 假设档案数据里有archives字段用来存放图片数据，这里进行关联（简单示例，根据实际数据结构调整）
    if (list_file.value.length > 0 && localImages.length > 0) {
        list_file.value[0].archives = localImages;
    }
    console.log(list_file.value);
}
getFile();

// 跳转到添加页面
const addend=()=>{

  router.push('/my_file_add')
}

// 跳转到修改页面
const append = () => {
  router.push('/my_file_edit')
}
</script>



<style scoped lang="scss">

.fileBox{
  width: 100%;
  height: 100%;
}
.head {
  height: 50px; // 100px * 0.5 = 50px
  line-height: 75px; // 150px * 0.5 = 75px
  display: flex;
  /* background: red; */
  color: #999;
  position: relative;
}

.message_title {
  color: black;
  position: absolute;
  left: 40%;
  font-size: 17px; // 34px * 0.5 = 17px
}

.line {
  height: 7.5px; // 15px * 0.5 = 7.5px
  width: 100%;
  margin-top: 5px; // 10px * 0.5 = 5px
}

.file_add{
  width: 80%; // 80% * 0.5 = 40%
  height: 40px; // 80px * 0.5 = 40px
  border-radius: 7.5px; // 15px * 0.5 = 7.5px
  background: #3087ea;
  color: aliceblue;
  font-size: 15px; // 30px * 0.5 = 15px
  position: absolute;
  bottom: 10%; // 20% * 0.5 = 10%
  left: 10%; // 10% * 0.5 = 5%
  border: none;
}
.file_add:active{
  box-shadow: none;
  opacity: 0.9;
  transition: 0s;
}

.message_img{
  width: 200px; // 400px * 0.5 = 200px
  height: 200px; // 400px * 0.5 = 200px
  margin-left: 25%; // 25% * 0.5 = 12.5%
  margin-top: 30%; // 30% * 0.5 = 15%
}

.file_box{
  margin: 25px; // 50px * 0.5 = 25px
}

.file_edit{
  width: 40%; // 80% * 0.5 = 40%
  height: 40px; // 80px * 0.5 = 40px
  border-radius: 7.5px; // 15px * 0.5 = 7.5px
  background: #3087ea;
  color: aliceblue;
  font-size: 15px; // 30px * 0.5 = 15px
  position: absolute;
  bottom: 4%; // 8% * 0.5 = 4%
  left: 5%; // 10% * 0.5 = 5%
  border: none;
}

.file_list>p:first-child{
  color: #368beb;
}
.zlgt{
  margin-bottom: -12.5px;
}

.imgsc{
  display: flex;
}

.file_img{
  width: 85px; // 170px * 0.5 = 85px
  height: 80px; // 160px * 0.5 = 80px
  margin-left: 2.5px; // 5px * 0.5 = 2.5px
  float: left;
}
</style>
